<template>
  <el-dialog
    :close-on-click-modal="false"
    title="项目详情"
    :visible.sync="showsDetail"
    :before-close="cancel"
    width="92%"
    top="5vh"
    lock-scroll
    :append-to-body="true"
  >
    <div class="edit-form">
      <el-form status-icon :model="datas" ref="editDetail">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item prop="project_no" label="项目编号：" :label-width="baseStyle.width">
              <div>{{datas.project_no}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_name" label="项目名称：" :label-width="baseStyle.width">
              <div>{{datas.project_name}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="class_name" label="项目类别：" :label-width="baseStyle.width">
              <div>{{datas.class_name}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_level" label="优先级别：" :label-width="baseStyle.width">
              <div>{{datas.project_level}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_pm_name" label="项目经理：" :label-width="baseStyle.width">
              <div>{{datas.project_pm_name}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="project_skiller_name" label="技术负责人：" :label-width="baseStyle.width">
              <div>{{datas.project_skiller_name}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="teamData" label="开发测试人员：" :label-width="baseStyle.width">
              <div class="dev-test">
                <span v-for="item in datas.teamData" :key="item.id">{{item.realname}}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="month_plan" label="本月计划：" :label-width="baseStyle.width">
              <div class="dev-test" v-html="datas.month_plan?datas.month_plan:'暂无计划'">
                <!-- <span>{{datas.month_plan?datas.month_plan:"暂无计划"}}</span> -->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="project_des" label="项目描述：" :label-width="baseStyle.width">
              <div>{{datas.project_des}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="fileList" label="项目资料：" :label-width="baseStyle.width">
              <div v-for="file in fileList" :key="file.path">
                <a style="color:#409eff" target="_bank" :href="file.downLoade">{{file.name}}</a>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="currentStage" label="项目阶段：" :label-width="baseStyle.width">
              <el-steps :active="datas.currentStageNum*1-1" align-center finish-status="success">
                <el-step
                  class="steps"
                  v-for="item in datas.project_stageroute_object"
                  :key="item.stage_name"
                  :title="item.stage_name"
                  :description="item.start_time.slice(0,10)+' 至 '+item.end_time.slice(0,10)"
                ></el-step>
              </el-steps>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="mettingItems" label="项目会议待确认事项：" :label-width="baseStyle.width">
              <div v-for="(thing,index) in datas.mettingItems" :key="index">
                <div>{{`${index+1}、会议时间：${thing.date_time.slice(0,10)}`}}</div>
                <div class="things-item">
                  <span class="item-title">{{`事项：${thing.content}`}}</span>
                  <i v-if="thing.status===1" class="el-icon-circle-check" style="color:#67C23A" />
                  <i v-if="thing.status===0" class="el-icon-circle-close" />
                  <span
                    v-if="thing.status===0&&thing.reason&&thing.reason!=undefined"
                    class="item-mark"
                  >未通过原因：{{thing.reason}}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import baseURL from "@utils/upLoadBaseUrl";
import API from "@apis/newProject";
export default {
  name: "editDetail",
  props: {
    baseStyle: Object,
    datas: Object,
    showsDetail: Boolean
  },
  data() {
    return {
      baseURL: baseURL,
      fileList: []
    };
  },
  created() {
    this.getMettingList();
    // console.log(this.baseURL.slice(0,-1),"baseURL")
    this.datas.project_file.map(item => {
      this.fileList.push({
        name: item.name || item.path,
        path: item.path,
        downLoade: baseURL.slice(0, -1) + item.path
      });
    });
  },
  methods: {
    //获取会议列表
    getMettingList() {
      API.getMettingLists(this.datas.project_id)
        .then(res => {
          this.$set(this.datas, "mettingItems", res.data);
        })
        .catch(err => this.$message.error(err.message));
    },
    cancel() {
      this.$emit("update:showsDetail", false);
      this.$emit("update:datas", {});
      this.filesData = [];
      this.$refs.editDetail.resetFields();
    }
  }
};
</script>
<style scoped>
.things-item > .item-title {
  padding-right: 20px;
}
.things-item .item-mark {
  padding-left: 20px;
  font-size: 12px;
}
.dev-test > span {
  padding-right: 20px;
}
</style>